﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Droppable - Revert draggable position</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style>
        #draggable
        {
            width: 150px;
            height: 150px;
            float: left;
        }
        #droppable
        {
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
        
        .width_100
        {
            width: 800px;
            height: 1000px;
            overflow: auto;
            margin: 0px auto;
            z-index: -100;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#draggable").draggable();

            $("#droppable").droppable({
                tolerance: "pointer",
                activeClass: "ui-state-hover",
                hoverClass: "ui-state-active",
                drop: function (event, ui) {

                    $(this)
                    .addClass("ui-state-highlight");

                    var position = calcOffset(ui.draggable, $(this));
                    console.log(position.left + " : " + position.top);

                    ui.draggable.appendTo($(this));
                    ui.draggable.css(position);
                    ui.draggable.animate({ width: "100px", height: "100px" }, { queue: false, duration: 3000 });
                    ui.draggable.animate({ "left": 0, "top": 0 }, { queue: false, duration: 3000, easing: "easeOutBounce" });

                }
            });
        });

        function zoomTest() {
            $("#draggable").animate({ width: "100px", height: "100px" }, { queue: false, duration: 3000 })

        }


        function calcOffset(src, target) {
            console.log(src.offset().left + " : " + src.offset().top);
            console.log(target.offset().left + " : " + target.offset().top);
            return {
                "left": parseInt(src.offset().left - target.offset().left, 10) + "px",
                "top": parseInt(src.offset().top - target.offset().top, 10) + "px"
            }
        }
    </script>
</head>
<body>
<h1>size, position 同时</h1>
    <div id="droppable" class="ui-widget-header">
    </div>
    <div id="draggable" class="ui-widget-content">
        <p>
            I revert when I'm dropped</p>
    </div>
</body>
</html>
